<template>
  <div>
    <div class="button">
      <el-radio-group v-model="dateChoose" @change="reDraw">
      <el-radio-button label="最近七天" ></el-radio-button>
      <el-radio-button label="最近十五天"></el-radio-button>
      <el-radio-button label="最近三十天"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="charts">
      <el-card shadow="never" id="user" class="echarts"></el-card>
      <el-card shadow="never" id="expert" class="echarts"></el-card>
      <el-card shadow="never" id="project" class="echarts" ></el-card>
      <el-card shadow="never" id="extract" class="echarts"></el-card>
    </div>
  </div>
</template>
<script>

import User from '@/views/system/User.vue'
import {
  ExpertStatistics,
  ExtractStatistic,
  ProjectStatistics,
  UserStatistics
} from '@/request/Statistics/statistics-api'

export default {
  mounted () {
    this.user(this.num)
     this.expert(this.num)
    this.project(this.num)
    this.extract(this.num)
  },
  data() {
    return {
      dateChoose:"最近七天",
      num:1
    }
  },methods:{
    async user (num) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("user"), 'default');
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "用户统计",
          x: 'center',
          y: 'top',
          textAlign: 'center'
        },
        tooltip: {},
        xAxis: {
          name: '时间',
          data: ["null", "null", "null", "null", "null", "null", 'null'],
        },
        yAxis: {
          name: '用户数量',
        },
        legend: {
          padding: 10,
          tooltip: {
            show: true,
          },
          y: 'bottom',
          data: ['用户总数', '新增用户'],
        },
        series: [
          {
            name: "用户总数",
            type: 'bar',
            data: [null, null, null, null, null, null, null],
          },
          {
            name: "新增用户",
            type: 'line',
            data: [null, null, null, null, null, null, null],
          }
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      let res = await UserStatistics(num)
      if (res&&res.code===200){
        option.xAxis.data=res.data.times
        option.series[0].data=res.data.total
        option.series[1].data=res.data.inc
      }
      myChart.setOption(option);
    },
    async expert (num) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("expert"), 'default');
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "专家统计",
          x: 'center',
          y: 'top',
          textAlign: 'center'
        },
        tooltip: {},
        legend: {
          padding: 10,
          tooltip: {
            show: true,
          },
          y: 'bottom',
          data: ['专家总数', '专家新增数量'],
        },
        xAxis: {
          name: '入库时间',
          data: ["null", "null", "null", "null", "null", "null", 'null'],
        },
        yAxis: {
          name: '入库专家数量',
        },
        series: [
          {
            name: "专家总数",
            type: 'line',
            data: [null, null, null, null, null, null, null],
          },
          {
            name: "专家新增数量",
            type: 'bar',
            data: [null, null, null, null, null, null, null],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      let res = await ExpertStatistics(num)
      if (res && res.code === 200) {
        option.xAxis.data = res.data.times
        option.series[0].data = res.data.total
        option.series[1].data = res.data.inc
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    async project (num) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("project"), 'default');
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "项目统计",
          x: 'center',
          y: 'top',
          textAlign: 'center'
        },
        tooltip: {},
        legend: {
          padding: 10,
          tooltip: {
            show: true,
          },
          y: 'bottom',
          data: ['项目总数', "已完成评审","新增数量"],
        },
        xAxis: {
          name: '创建时间',
          data: ["null", "null", "null", "null", "null", "null", 'null'],
        },
        yAxis: {
          name: '项目数量',
        },
        series: [
          {
            name: "项目总数",
            type: 'line',
            data: [null, null, null, null, null, null, null],
          },
          {
            name: "新增数量",
            type: 'line',
            data: [null, null, null, null, null, null, null],
          },
          {
            name: "已完成评审",
            type: 'line',
            data: [null, null, null, null, null, null, null],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      let res = await ProjectStatistics(num)
      if (res && res.code === 200) {
        option.xAxis.data = res.data.times
        option.series[0].data = res.data.total
        option.series[1].data = res.data.inc
        option.series[2].data = res.data.over
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    async extract (num) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("extract"), 'default');
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "专家抽取统计",
          x: 'center',
          y: 'top',
          textAlign: 'center'
        },
        tooltip: {},
        xAxis: {
          name: '创建时间',
          data: ["null", "null", "null", "null", "null", "null", 'null'],
        },
        yAxis: {
          name: '抽取次数',
        },
        legend: {
          padding: 10,
          tooltip: {
            show: true,
          },
          y: 'bottom',
          data: ['接受邀请', '未接受邀请&取消邀请','新增邀请'],
        },
        series: [
          {
            name: "未接受邀请&取消邀请",
            type: 'line',
            data: [null, null, null, null, null, null, null],
          },
          {
            name: "接受邀请",
            type: 'line',
            data: [null, null, null, null, null, null, null],
          },
          {
            name: "新增邀请",
            type: 'bar',
            data: [null, null, null, null, null, null, null],
          }
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      let res = await ExtractStatistic(num)
      if (res && res.code === 200) {
        option.xAxis.data = res.data.times
        option.series[0].data = res.data.no
        option.series[1].data = res.data.yes
        option.series[2].data = res.data.inc
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    reDraw(a){
      this.user(this.num)
      this.expert(this.num)
      this.project(this.num)
      this.extract(this.num)
    }
  },watch:{
    dateChoose:{
      immediate:true,
      handler(val,old){
        if (val==='最近十五天'){
          this.num=2
        }else if (val==='最近三十天'){
          this.num=3
        }else {
          this.num=1
        }
      }
    }
  }
};
</script>
<style  scoped lang="less">
.button{
  display: flex;
  justify-content: right;
}
.charts{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 20px;
  .el-card{
    height: 350px;
    /* 间隙为5px */
    margin: 0 10px 10px 0;
    /* END */

    /* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
    width: calc((100% - 15px) / 2);
    /* END */

    /* 加入这两个后每个item的宽度就生效了 */
    min-width: calc((100% - 15px) / 2);
    max-width: calc((100% - 15px) / 2);
    &:nth-child(2n) { // 去除第3n个的margin-right
      margin-right: 0;
    }

  }
  /deep/.echarts{
    padding-top: 20px;
  }
}
</style>
